.user {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  height: 100%;
  background-color: #f5f5f5;
  .head {
    width: 100%;
    background: url(//s.yezgea02.com/1615971681107/%E4%BD%8D%E5%9B%BE%402x.png)
      no-repeat;
    height: 230px;
    box-sizing: border-box;
    padding: 34px;
    display: flex;
    justify-content: space-between;
    .info {
      display: flex;
      flex-direction: column;
      .name {
        font-size: 23px;
        font-weight: 700;
        padding: 2px 14px 2px 14px;
        border-radius: 28px;
        background-color: #597fe7;
        display: flex;
        color: #fff;
        margin-bottom: 8px;
      }
      .person {
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 20px;
      }
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
  .content {
    background-color: #fff;
    width: 90%;
    position: absolute;
    top: 172px;
    box-shadow: 0.08rem 0.05333rem 0.53333rem 0.26667rem #0000001a;
    border-radius: 14px;
    padding: 0 23px 0 23px;
    .listItem {
      height: 74px;
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
      .liDetail {
        margin-top: 10px;
        img {
          margin-right: 23px;
        }
        span {
          display: inline-block;
          font-size: 21px;
        }
      }
    }
  }
  .button {
    position: absolute;
    width: 100%;
    bottom: 65px;
    display: flex;
    justify-content: center;
  }
}
